/**
 * @file 大屏项目
 */
import {Component, Fragment} from 'react';
import moment from 'moment';
import {Button} from 'antd';
import Fullscreen from 'react-full-screen';
import {getScreenInfo} from '~/service/screen';
import './index.styl';
import Group from 'antd/lib/input/Group';

class Grade extends Component {
    constructor(props) {
        super(props);
        this.state = {
            totalMoney: 0,
            time: moment().locale('zh-cn')
                .format('YYYY-MM-DD HH:mm:ss'),
            percent: 0,
            isFull: false,
            ROI: null,
            sendReq: true
        };
    }

    componentDidMount() {
        const Html = document.getElementsByTagName('html')[0];
        Html.style.fontSize = 'calc(12px + (24 - 12)*(100vw - 320px)/(800 - 320))';
        this.intervalId = setInterval(() => {
            this.loadData();
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    handleMoney = money => {
        const moneyStr = money.toString();
        const moneySlice = moneyStr.slice(0, moneyStr.length - 2);
        if (moneySlice.length === 0) {
            return (
                <>
                    {0}
                </>
            );
        }
        if (moneySlice.length > 4) {
            return (
                <>
                    {moneySlice.slice(0, moneySlice.length - 4)}
                    <span style={{fontSize: '0.5rem', margin: '0 10px'}}>万</span>
                    {moneySlice.slice(moneySlice.length - 4)}
                </>
            );
        }
        return (
            <>
                {moneyStr.slice(0, moneyStr.length - 2)}
            </>
        );
    };

    loadData = () => {
        const locationhref = decodeURI(window.location.href);
        const params = locationhref.split('/');
        const Idstr = unescape(params[params.length - 1]);
        const id = Idstr.slice(0, Idstr.indexOf('类型'));
        // 发送请求
        this.setState({
            time: moment().locale('zh-cn')
                .format('YYYY-MM-DD HH:mm:ss')
        });
        const {sendReq} = this.state;
        if (sendReq) {
            getScreenInfo({id}).then(res => {
                const {totalMoney, percent, roi} = res.data;
                this.setState({
                    totalMoney: totalMoney || 0,
                    percent: percent || 0,
                    ROI: roi
                });
            })
                .catch(() => {
                    this.setState({
                        sendReq: false
                    });
                });
        }
    };

    handleFull = () => {
        this.setState({isFull: true});
    };

    render() {
        const {totalMoney, time, percent, isFull, ROI} = this.state;
        return (
            <div>
                <Button onClick={this.handleFull} type="link" style={{float: 'left'}}>
                    进入全屏
                </Button>
                <Fullscreen
                    enabled={isFull}
                    // eslint-disable-next-line react/jsx-no-bind
                    onChange={isFull => this.setState({isFull})}
                >
                    <div className="container_grade">
                        <div className="text">成交金额</div>
                        <div className="money">
                            <span className="symbol">¥</span>
                            {this.handleMoney(totalMoney)}
                        </div>
                        {
                            ROI !== null ? (
                                <div className="extend-ROI-container">
                                    <div>
                                        <div className="text text-ROI">转化率</div>
                                        <div className="extend">
                                            {percent}
                                            <span className="symbol">%</span>
                                        </div>
                                    </div>
                                    <div>
                                        <div className="text text-ROI">ROI</div>
                                        <div className="extend">
                                            {ROI}
                                        </div>
                                    </div>
                                </div>
                            ) : (
                                <Fragment>
                                    <div className="text">转化率</div>
                                    <div className="extend">
                                        {percent}
                                        <span className="symbol">%</span>
                                    </div>
                                </Fragment>
                            )
                        }
                        <div className="time">
                            {time}
                        </div>
                    </div>
                </Fullscreen>
            </div>
        );
    }
}

export default Grade;
